<template>
	<view>
		<view class="zcModel-card uni-flex zcFlex_column ">
			<view class="zcModel-item uni-flex zcAlignI_center personal_info_wrap">
				<view class="zcModel-top-left">
					<image style="height: auto;" :src="PersonalInfo.HeadImageURL?PersonalInfo.HeadImageURL:(imgPath+'UniImages/img-23.png')" mode="widthFix"></image>
				</view>
				<view class="zcModel-top-right">
					<view>{{PersonalInfo.Name?PersonalInfo.Name:''}}</view>
					<view>工号：{{PersonalInfo.Code?PersonalInfo.Code:''}}</view>
					<view>门店：{{PersonalInfo.ShopOrganName?PersonalInfo.ShopOrganName:''}}</view>
				</view>
				<!-- <view class="iconfont icon-untitled74"></view> -->
			</view>
			<view class="zcModel-item uni-flex zcAlignI_center ">
				<view class="zcModel-bottom">
					<view class="uni-flex zcAlignI_center">{{PersonalInfo.Money?PersonalInfo.Money:0}}</view>
					<view class="">佣金(元)</view>
				</view>
				<view class="zcModel-bottom">
					<view class="uni-flex zcAlignI_center">{{PersonalInfo.MonthMoney?PersonalInfo.MonthMoney:0}}</view>
					<view class="">本月预计(元)</view>
				</view>
			</view>
		</view>
		<view class="uni-flex nav_list_wrap">
			<block v-for="(item,index) in navList" :key='index'>
				<navigator :url="item.url" class="zcItem uni-flex zcFlex_column zcAlignI_center zcJustifyC_center uni-flex-item">
					<view class="zcImage">
						<image :src="item.src" mode="widthFix"></image>
					</view>
				<view class="color_gray">{{item.name}}</view>
			</navigator>
			</block>	
		</view>
		
		<navigator url="../changePhone/changePhone" class="uni-flex zcAlignI_center iconfont navigator_bottom">
			<view class="personal_icon"><image mode="widthFix" :src='imgPath+"UniImages/persion_zh.jpg"'></image></view>
			<view class="">我的账号 </view>
			<view class="iconfont icon-unie6a3 " style="margin-left: auto;"></view>
		</navigator>
		<navigator url="../notice/notice" class="uni-flex zcAlignI_center iconfont navigator_bottom">
			<view class="personal_icon"><image mode="widthFix" :src='imgPath+"UniImages/persion_gg.jpg"'></image></view>
			<view class=" ">公告中心 </view>
			<view class="iconfont icon-unie6a3 " style="margin-left: auto;"></view>
		</navigator>
	<!-- <button type="primary" class='exit_btn'>退出登录</button> -->
	</view>
</template>

<script>
	
	let _this;
	export default {
		data() {
			return {
				imgPath:this.$ZcPublic.Domain,
				PersonalInfo:{},
				navList:[
					{src:this.$ZcPublic.Domain+'UniImages/myPolicy.jpg',name:"我的保单",url:'../myWarranty/myWarranty'},
					{src:this.$ZcPublic.Domain+'UniImages/myCustomer.jpg',name:"我的客户",url:'../myCustomer/myCustomer'},
					{src:this.$ZcPublic.Domain+'UniImages/myVisit.jpg',name:"我的回访",url:'../myVisit/myVisit'},
				]
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			_this.zcGetSalesManPersonalInfo();
		},
		methods: {
			zcGetSalesManPersonalInfo() {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetSalesManPersonalInfo',
						Data: {}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('个人中心 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data) {
								_this.PersonalInfo = resjson.data;
							}
							
						} else{
							
						}
					},
					Scope: this
				})
			}
		}
	}
</script>

<style>
	.zcModel-card{
		width: 100%;
		height: 400upx;
		/* background-image: url(''); */
		background-image: url("");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	/* .zcModel-item{height: 50%;} */
	.zcModel-top-left{width: 120upx;height: 120upx;border-radius: 100%;overflow: hidden;margin: 0 40upx;padding: 10upx;background-color: #fff;}
	.zcModel-top-left image{width: 100%;height: 100%;border-radius: 50%;}
	.zcModel-top-right{display: flex;flex-direction: column;flex: 1;}
	.zcModel-top-right view{color: #FFFFFF;font-size: 26upx;}
	.zcModel-top-right view:first-child{font-size: 36upx;}
	.zcModel-item>.iconfont{padding: 16upx 30upx;transform: rotate(180deg);}
	.icon-untitled74:after{
		content: '\e7db';
		font-size: 38upx;
		color: #FFFFFF;
	}
	.zcModel-bottom{display: flex;flex-direction: column;flex: 1;color: #FFFFFF;align-items: center;position: relative;margin-top: 20upx;}
	.zcModel-bottom:nth-of-type(1):before{content: '';position: absolute;width: 2upx;height: 70upx;background-color:#E5E5E5 ;right: 0;top:50%;margin-top: -30upx;}
	.zcModel-bottom>view:first-child{font-size: 34upx;}
	.zcModel-bottom>view:last-child{opacity: 0.5;border: none;}
	.zcModel-bottom>view{color: #fff;}

	.zcModel-title{font-size: 36upx;padding: 18upx;font-weight: bold;display: flex;color: #999999;}
	.zcModel-title>view{font-size: 30upx;font-weight: bold;}
	
	.zcItem{background-color: #FFFFFF;box-sizing: border-box;padding: 20upx;}
	.zcItem:last-child{border: none;}
	.zcImage{width: 60%;}
	.zcImage>image{width: 100%;}
	/* 2019-10-24修改样式 */
	.personal_info_wrap{
		margin-top: 30upx;
	}
	.nav_list_wrap{
		margin: -60upx 40upx 0 40upx;
		background-color: #FFF;
		border-radius: 20upx;
		padding: 20upx 40upx;
		box-shadow: 0 1upx 5upx 5upx #D7E2EA;
		margin-bottom: 50upx;
	}
	.color_gray{
		color: #656565;
	}
	.navigator_bottom{
		height: 100upx;
		line-height: 100upx;
		background-color: #fff;
		margin-top: 30upx  ;
		padding: 0 20upx;
		box-shadow: 1upx 1upx 10upx 2upx #E5E2E2;
	}
	.exit_btn{
		width: 70%;
		margin-top: 80upx;
		background-color: #fff !important;
		color: #F88269 !important;
		box-shadow: 1upx 1upx 10upx 2upx #E5E2E2;
	}
	.button-hover{
		background-color: #f1f1f1 !important;
	}
	.personal_icon>image{
		width: 34upx;
		height: 34upx;
		margin: 12upx 15upx 0 20upx;
	}
</style>
